<template>
  <div>
    <div class="content" v-if="headerAdd">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="视频名称">
          <el-input
            v-model="queryParams.videoName"
            clearable
            placeholder="视频名称"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="btnAdd">新增</el-button>
        <el-button type="primary" plain @click="getList">查询</el-button>
      </el-form>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
      <el-table-column fixed prop="userName" label="用户名"> </el-table-column>
        <el-table-column
          fixed
          prop="videoReportId"
          label="视频报告编码"
        ></el-table-column>
        <el-table-column
          fixed
          prop="videoName"
          label="视频名称"
        ></el-table-column>
        <!-- <el-table-column prop="userId" label="userId"></el-table-column> -->
       
        <el-table-column prop="videoCenter" label="视频内容预览"></el-table-column>
        <el-table-column prop="consumption" label="消费"></el-table-column>
        <el-table-column prop="toShow" label="展现"></el-table-column>
        <el-table-column prop="click" label="点击"></el-table-column>
        <el-table-column prop="promotionDevice" label="投放设备"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDel(scope.row.videoReportId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer" v-if="headerAdd">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <add
      v-if="addShow"
      :objData="objData"
      :isEdit="isEdit"
      @handleCancle="handleCancle"
    ></add>
    <detail
      v-if="viewShow"
      :objData="objData"
      @handleCancle="handleCancle"
    ></detail>
  </div>
</template>
<script>
import { list, del } from "@/api/sjbg/shipin";
import add from "./component/add";
import detail from "./component/detail";
import { mapState } from "vuex";
export default {
  name: "fukuang",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: "",
        userName: "",
        videoName: "",
      },
      headerAdd: true,
      addShow: false,
      viewShow: false,
      loading: false,
      isEdit: false,
      tableData: [],
      total: 0,
    };
  },
  components: {
    add,
    detail,
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    // TODO:
    // this.queryParams.userId = this.user.id;
    this.getList();
  },
  methods: {
    handleCancle() {
      this.addShow = false;
      this.headerAdd = true;
      this.viewShow = false;
      this.isEdit = false;
      this.getList();
    },
    // 新增
    btnAdd() {
      this.addShow = true;
      this.viewShow = false;
      this.headerAdd = false;
      this.isEdit = false;
    },
    // 编辑
    handleEdit(row) {
      this.addShow = true;
      this.viewShow = false;
      this.headerAdd = false;
      this.isEdit = true;
      this.objData = row;
    },
    // 查看
    handleView(row) {
      this.addShow = false;
      this.viewShow = true;
      this.headerAdd = false;
      this.objData = row;
    },
    // 删除
    handleDel(videoReportId) {
      this.$confirm("确定要删除该条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del({ videoReportId }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    // 查询列表
    getList() {
      this.loading = true;
      list(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = +response.total;
        this.loading = false;
      });
    },
    handleCurrentChange(e) {
      this.queryParams.pageNum = e;
      this.getList();
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e;
      this.getList();
    },
  },
};
</script>
<style scoped>
.content {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}
.footer {
  display: flex;
  justify-content: end;
  padding-right: 40px;
  padding-top: 23px;
}
</style>
